<template>
  <div class="roles-box">
    <!-- 1.添加角色按钮以及对话框dialog -->
    <div class="addroles">
      <el-button type="primary" @click="dialogVisible = true"
        >添加角色</el-button
      >
      <el-dialog
        v-model="dialogVisible"
        title="添加角色"
        width="40%"
        :before-close="handleClose"
      >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form.roleName" />
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDesc">
            <el-input v-model="form.roleDesc" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addData">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <!-- 2.表格 -->
    <div class="tables">
      <el-table :data="tableData" border style="width: 98%; margin: 0 auto">
        <el-table-column
          v-for="(roles, index) in options"
          :key="index"
          :prop="roles.prop"
          :label="roles.label"
          :width="roles.width"
        >
          <template v-if="roles.prop === 'i'">
            <el-icon><ArrowRight /></el-icon>
          </template>
          <template #default v-if="roles.prop === 'operation'">
            <!-- 编辑按钮 -->
            <el-button type="primary" :icon="Edit" size="small">编辑</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" :icon="Delete" size="small"
              >删除</el-button
            >
            <!-- 分配角色按钮 -->
            <el-button type="warning" :icon="Setting" size="small"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref, reactive } from "vue";
const { $axios } = getCurrentInstance().appContext.config.globalProperties;
import axios from "axios";
import { Edit, Delete, Setting } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";

// 1.添加角色按钮以及对话框dialog
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const form = reactive({
  roleName: "",
  roleDesc: "",
});
// 1添加用户的初始数据
const forRef = ref(null);
// 1添加用户的表单校验(在页面上prop一定声明一下才有星星和提示)
const rules = reactive({
  roleName: [
    {
      required: true,
      message: "请您填写角色名称",
      trigger: "blur",
    },
  ],
});
// 2 表格初始列表的请求
const tableData = ref([]); // 声明tableData为初始表格里的数据
axios
  .get("/api/roles", {
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  })
  .then((data: any) => {
    // console.log(data);
    tableData.value = data.data.data;
  });
// 2表格中表头渲染的初始数据
const options = ref([
  {
    prop: "i",
    label: "",
    width: 50,
  },
  {
    prop: "id",
    label: "角色id",
    width: 120,
  },
  {
    prop: "roleName",
    label: "角色名称",
    width: 270,
  },
  {
    prop: "roleDesc",
    label: "角色描述",
    width: 270,
  },
  {
    prop: "operation",
    label: "操作",
    width: 300, // 渲染的时候button按钮叠加了，所以在这给一个宽度，在template使用(:width="user.width")
  },
]);
// 添加角色里面对话框的数据请求
const adds = ref(2);
const adduserRequest = async (params: any) => {
  await axios
    .post("/api/roles", params, {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
    .then((data) => {
      console.log(data);
      adds.value = data.data.meta.status;
    });
};
const addData = async () => {
  dialogVisible.value = false;
  await adduserRequest(form);
  if (adds.value == 201 || adds.value == 200) {
    ElMessage({
      message: "用户添加成功",
      type: "success",
    });
  }
};

// const addData = (params: any) => {
//   dialogVisible.value = false;
//   $axios
//     .post("/api/roles", params, {
//       headers: {
//         Authorization: localStorage.getItem("token"),
//       },
//     })
//     .then((data: any) => {
//       console.log(data);
//     });
// };
</script>

<style lang="less" scoped>
.roles-box {
  .addroles {
    .el-button {
      margin-left: 10px;
    }
  }
  .tables {
    margin-top: 10px;
  }
}
</style>
